<template>
  <!-- v-loading="true" -->
  <div>
    <!-- <pageSearch :searchFormConfig="searchFormConfig" @searchSubmit="searchSubmit" /> -->
    <pageTable :tableData="tableData" :tableInit="params.tableInit" @sizeChange="sizeChange"
      @currentChange="currentChange" @exportFn="exportExcel" v-loading="loading" @pageAdd="openDrawerFn('新增')">
      <template #headimage="{ row }">
        <el-image style="width: 100px; height: 100px;z-index: 9999999;" :src="getPicImg(row.headimage)" :zoom-rate="1.2"
          :max-scale="7" :min-scale="0.2" :preview-src-list="[getPicImg(row.headimage)]" :preview-teleported='true'
          :initial-index="4" fit="cover" />
      </template>
      <template #link="{ row }">
        <el-link :href="row.link" target="_blank">{{ row.link }}</el-link>
      </template>
      <template #operation="{ row }">
        <el-button type="primary" link @click="openDrawerFn('编辑', row)">编辑</el-button>
        <el-popconfirm title="确认要删除吗?" @confirm="delData(row.id)">
          <template #reference>
            <el-button type="danger" link>删除</el-button>
          </template>
        </el-popconfirm>
      </template>



    </pageTable>



    <Drawer ref="DrawerRef" :title="typeText" @submit="submitForm(ruleFormRef)" @onClose="resetForm(ruleFormRef)">
      <el-form ref="ruleFormRef" :model="ruleForm" status-icon :rules="rules" label-width="120px" class="demo-ruleForm">
        <el-form-item label="标题" prop="title">
          <el-input v-model="ruleForm.title" autocomplete="off" />
        </el-form-item>
        <!-- prop="ftitle" -->
        <el-form-item label="副标题">
          <el-input v-model="ruleForm.ftitle" autocomplete="off" />
        </el-form-item>
        <!-- prop="link" -->
        <el-form-item label="跳转链接地址">
          <el-input placeholder="请填写链接或者文章id" v-model="ruleForm.link" autocomplete="off" />
        </el-form-item>
        <el-form-item label="图片" prop="headimage">
          <LTUpload tip="建议图片尺寸1920*520" v-model="ruleForm.headimage"></LTUpload>
        </el-form-item>
      </el-form>
    </Drawer>


  </div>
</template>

<script setup lang="ts">
import pageTable from "@/components/base-ui/page-table";
import Drawer from "@/components/base-ui/drawer";
import { reactive, ref } from 'vue'
import type { FormInstance, FormRules, UploadProps, UploadUserFile } from 'element-plus'
import { tableInit } from "./config/table.config";
import { usepageTable } from '@/components/base-ui/page-table/usePageTable'
import LTUpload from '@/components/base-ui/upload'
import { getselbanner, insertbanner, updatebanner, delbanner } from '@/api/banner'
import { getPicImg } from '@/api/upload'
import { message } from "@/utils/message";


const {
  exportExcel,
  tableData,
  getData,
  addData,
  amendData,
  params,
  loading,
  sizeChange,
  currentChange,
  delData,
  DrawerRef,

} = usepageTable({
  tableInit,
  getRes: getselbanner,
  addRes: insertbanner,
  delRes: delbanner,
  updateRes: updatebanner
})

getData()



const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
  title: '',
  ftitle: '',
  link: '',
  headimage: [],
})

const rules = reactive<FormRules<typeof ruleForm>>({
  title: [
    { required: true, message: '请填写标题', trigger: 'blur' },
  ],
  ftitle: [
    { required: true, message: '请填写子标题', trigger: 'blur' },
  ],
  // link: [
  //   { required: true, message: '请填写链接', trigger: 'blur' },
  // ],
  headimage: [
    { required: true, message: '请上传图片', trigger: 'blur' }
  ],
})
const typeText = ref('')
const handleID = ref(null)
const openDrawerFn = (text, row) => {
  typeText.value = text
  if (row) {
    handleID.value = row.id
    Object.keys(ruleForm).forEach((key) => ruleForm[key] = row[key])
    if (row.headimage) {
      ruleForm.headimage = [{
        name: '轮播图',
        url: getPicImg(row.headimage),
        imgId: row.headimage
      }]
    }
  }
  DrawerRef.value.open();
}


const submitForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.validate((valid) => {
    if (valid) {
      let Q = {
        "ftitle": ruleForm.ftitle,
        "headimage": ruleForm.headimage[0]?.response?.data?.result[0]?.uuid ?? ruleForm.headimage[0].imgId,
        "link": ruleForm.link,
        "title": ruleForm.title,
        "id": handleID.value
      }
      if (typeText.value === '新增') {
        addData(Q)
      } else {
        amendData(Q)
      }
    } else {
      console.log('error submit!')
      return false
    }
  })
}

const resetForm = (formEl: FormInstance | undefined) => {
  if (!formEl) return
  formEl.resetFields()
  ruleForm.ftitle = ''
  ruleForm.title = ''
  ruleForm.link = ''
  ruleForm.headimage = []
  handleID.value = null
}

</script>

<style scoped></style>
